<template>
  <div class="content">
    <div class="comment">
      <img @click="release" src="../../img/fabu.gif" alt="" />
    </div>
    <div>
      <van-nav-bar title="患者案例" />
    </div>
    <div class="image">
      <img @click="fenxiang" src="../../img/分享治疗经验.gif" alt="" />
    </div>
    <div class="tab">
      <van-tabs sticky swipeable style="width: 100%; height: 100%">
        <van-tab title="最新">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <VirtualList :items="items" :itemHeight="8000" :itemComponent="ItemComponent">
                <div class="content" v-for="(item, index) in listData" :key="index">
                  <div class="content-1" @click="PatientDetail(item.id)">
                    <div class="tab-top">
                      <div class="left">
                        <img :src="item.avatar" alt="" />
                      </div>
                      <div class="right">
                        <span>{{ item.name }}</span>
                        <span>亲身经历的人</span>
                      </div>
                    </div>
                    <div class="patient-qk">
                      <p>{{ item.title }}</p>
                    </div>
                    <div class="patient-nei">
                      <div v-for="(items, index) in item.content" :key="index">
                        <img :src="items.img" alt="" v-lazy="items.img" />
                      </div>
                    </div>

                    <div class="patient-ping">
                      <p><van-text-ellipsis :content="item.content[0].cpap" /></p>
                    </div>
                    <div class="patient-an">
                      <span>{{ item.cases }}</span>
                    </div>
                  </div>

                  <div class="patient-zan">
                    <p>
                      <van-icon class="patient-zan-1" name="eye-o"></van-icon
                      ><span>{{ item.browse }}</span>
                    </p>
                    <p>
                      <van-icon
                        class="patient-zan-1"
                        name="star-o"
                        @click="star(item)"
                        :color="item.collectstate ? 'red' : ''"
                      ></van-icon
                      ><span>{{ item.collect }}</span>
                    </p>
                    <p>
                      <van-icon
                        class="patient-zan-1"
                        name="like-o"
                        @click="like(item)"
                        :color="item.praisestate ? 'red' : ''"
                      ></van-icon
                      ><span>{{ item.praise }}</span>
                    </p>
                  </div>
                  <hr style="border-top: 0; border-right: 0; border-left: 0" />
                </div>
              </VirtualList>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="最热">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh" animation-duration="300">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="content" v-for="(item, index) in listData" :key="index">
                <div class="content-1" @click="PatientDetail(item.id)">
                  <div class="tab-top">
                    <div class="left">
                      <img :src="item.avatar" alt="" />
                    </div>
                    <div class="right">
                      <span>{{ item.name }}</span>
                      <span>亲身经历的人</span>
                    </div>
                  </div>

                  <div class="patient-qk">
                    <p>{{ item.title }}</p>
                  </div>
                  <div class="patient-nei">
                    <div v-for="(items, index) in item.content" :key="index">
                      <img :src="items.img" alt="" v-lazy="items.img" />
                    </div>
                  </div>

                  <div class="patient-ping">
                    <p><van-text-ellipsis :content="item.content[0].cpap" /></p>
                  </div>
                  <div class="patient-an">
                    <span>{{ item.cases }}</span>
                  </div>
                </div>

                <div class="patient-zan">
                  <p>
                    <van-icon class="patient-zan-1" name="eye-o"></van-icon
                    ><span>{{ item.browse }}</span>
                  </p>
                  <p>
                    <van-icon
                      class="patient-zan-1"
                      name="star-o"
                      @click="star(item)"
                      :color="item.collectstate ? 'red' : ''"
                    ></van-icon
                    ><span>{{ item.collect }}</span>
                  </p>
                  <p>
                    <van-icon
                      class="patient-zan-1"
                      name="like-o"
                      @click="like(item)"
                      :color="item.praisestate ? 'red' : ''"
                    ></van-icon
                    ><span>{{ item.praise }}</span>
                  </p>
                </div>
                <hr style="border-top: 0; border-right: 0; border-left: 0" />
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import http from '@/utils/http'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import VirtualList from '@/components/VirtualList.vue/index.vue'

const items = Array.from({ length: 100 }, (v, k) => ({
  id: k,
  name: `Item ${k + 1}`,
}))

const pageCode = ref(0)
const pageSize = ref(10)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

const router = useRouter()
const listData = ref<any[]>([])
const data = ref<any[]>([])
async function Getlist() {
  const res = await http.get('/api/case')
  data.value = res.data.data
  listData.value = data.value.slice(
    (pageCode.value - 1) * pageSize.value,
    pageCode.value * pageSize.value
  )
  // console.log(data.value.length, listData.value.length)
}
Getlist()

// 上拉加载
const onLoad = () => {
  pageCode.value = pageCode.value + 1
  setTimeout(() => {
    const adddata = data.value.slice(
      (pageCode.value - 1) * pageSize.value,
      pageCode.value * pageSize.value
    )
    listData.value = [...listData.value, ...adddata]
    // console.log(data.value.length, listData.value.length)
    // console.log(listData.value)
    loading.value = false
    if (listData.value.length >= data.value.length) {
      // 加载完成后不再触发
      finished.value = true
    }
  }, 1000)
}

//  下拉刷新
const onRefresh = () => {
  setTimeout(() => {
    Getlist()
    onLoad()
    // 加载中为fakse停止加载
    refreshing.value = false
  }, 1000)
}

// 分享治疗经验
const fenxiang = () => {
  router.push({ path: '/treatment' })
}
const release = () => {
  router.push({ path: '/releasek' })
}
// 详情
const PatientDetail = async (id: number) => {
  await http.get(`/api/case?id=${id}`).then(() => {
    router.push({ path: '/patient-detail', query: { id: id } })
  })
}
// 点赞
const like = (item: string) => {
  http.get('/api/praisestate?id=' + item.id).then((res) => {
    item.praisestate = res.data.data
    item.praise = res.data.numPraise
  })
}
// 收藏
// 点击收藏
const star = (item: string) => {
  http.get('/api/collectstate?id=' + item.id).then((res) => {
    item.collectstate = res.data.data
  })
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
.content {
  .comment {
    width: 100px;
    height: 100px;
    position: fixed;
    z-index: 99999;
    top: 78%;
    right: 10%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .image {
    width: 100%;
    height: 200px;
    display: flex;
    padding: 0 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tab {
    width: 100%;
    height: 100%;
    display: flex;
    .content {
      width: 100%;
      height: 750px;
      margin-bottom: 10px;
      padding: 0 20px;
      .tab-top {
        width: 100%;
        height: 120px;
        display: flex;
        .left {
          width: 20%;
          height: 1.5625rem;
          padding: 10px;
          img {
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 50%;
          }
        }
        .right {
          width: 80%;
          height: 1.5625rem;
          line-height: 1.5625rem;
          :nth-child(1) {
            color: #2c2c2c;
          }
          :nth-child(2) {
            border: 1px solid #8790b9;
            padding: 10px;
            border-radius: 40px;
            color: #43668e;
          }
          span {
            margin-left: 10px;
          }
        }
      }
      .patient-qk {
        width: 100%;
        height: 100px;
        line-height: 100px;
        p {
          font-size: 38px;
          color: #232323;
          font-weight: 500;
        }
      }
      .patient-nei {
        width: 100%;
        height: 260px;
        display: flex;

        div {
          width: 300px;
          height: 3.125rem;
          margin-left: 10px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
      }
      .patient-ping {
        width: 100%;
        height: 0.9375rem;
        p {
          width: 100%;
          height: 0.9375rem;
          color: #6d6b6e;
        }
      }
      .patient-an {
        width: 100%;
        height: 70px;
        span {
          width: 2.1875rem;
          height: 0.625rem;
          background: #e8edff;
          color: #3f5c96;
          text-align: center;
          align-content: center;
          border-radius: 0.625rem;
          line-height: 0.625rem;
          padding: 10px;
        }
      }
      .patient-zan {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        text-align: center;
        p {
          width: 200px;
          height: 50px;
        }
        .patient-zan-1 {
          margin-left: 20px;
          font-size: 40px;
          width: 30%;
          height: 70px;
          line-height: 35px;
          color: #919191;
        }
      }
    }
  }
}
</style>
